<html>  
  <head>  
        <meta charset="utf-8">  
        <title>世界语种分布图</title>  
  </head> 
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="colorDispatcher.js"></script>
<script>
	var width  = 1920;
	var height = 1080;
	
	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");
	
	var projection = d3.geo.mercator()
						.center([0, 0])
						.scale(300)
    					.translate([width/2, height/2]);
	
	var path = d3.geo.path()
					.projection(projection);
	
	
	var color = d3.scale.category20();
	
	
	d3.json("world.json", function(error, root) {
		
		if (error) 
			return console.error(error);
		console.log(root.features);
		
		svg.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("stroke","#000")
			.attr("stroke-width",1)
			.attr("fill", function(d,i){

			return colorDispatcher(i);

			})
			.attr("d", path )
			.on("mouseover",function(d,i){
                // d3.select(this)
                //     .attr("fill","yellow");
                    //testcode--0
                    console.log(i);
                    console.log("country: "+country);
                    //testcode--1
    		   var country = getCountryNameById(i);
  			   var lang = countryLangInfo[country] ;
  			   var  popu = countryPopuInfo[country];

               var c = d3.select("#country");
               var l = d3.select("#lang");
               var p = d3.select("#popu");

               c.text("国家: "+country);
               l.text("该国主要母语: "+lang);
               p.text("该国人口数: "+popu+"亿");
            });
            // .on("mouseout",function(d,i){
            //     d3.select(this)
            //         .attr("fill",color(i));
            // });
		
	});

</script>
<style>
#info{
	font-size: 2em;
	position: absolute;
    width: 300px;
    height: 300px;
    background-color: white;
    top: 524px;
}
</style>
<div id="info">
<p id="country"></p>
<p id="lang"></p>
<p id="popu"></p>
</div>

</body>  
</html>  